import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Video, Button } from '@tarojs/components'
import { AtTag } from 'taro-ui'
import './aiyanPolularVideo.scss'
import bighand from '../../img/bighand.png'
import cancelZan from '../../img/good.png'
import right from '../../img/right.png'
import star from '../../img/star.png'

import app from '../../main.js'


export default class AiyanPolularVideo extends Component {

    config = {
        navigationBarTitleText: '爱眼科普'
    }
    constructor() {
        super(...arguments)
        this.state = {
            // 视频大小
            videoStyle:{height:'200px;',width:'345px;'},
            // 视频数据
            videoInfo:{},
            //相关医生数据
            docInfo: [],
            //科普数据
            kepuArr: [],
            // 点赞数
            zan:'',
            isZan:''
        }
    }
    // 返回首页
    gotohomePage() {
        app.redirectTo('../eyeDoctor/eyeDoctor')
    }
    // 跳转到科普内容
    gotoaiyanPolular() {
        app.navigateTo('../aiyanPolular/aiyanPolular')
    }
    // 跳转到找医生
    gotofindDoctor() {
        let hospital = this.state.videoInfo.hospital
        let name = this.state.videoInfo.doctor_name
        // app.navigateTo('../findDoctor/findDoctor'+'?name='+name+'&hospital='+hospital)
        app.navigateTo('../findDoctor/findDoctor')
    }
    // 跳转到该医生首页
    gotodoctorindex(index) {
        let id = this.state.docInfo[index].id;
        app.navigateTo('../doctorindex/doctorindex?id='+id)
    }

    // 分享
    onShareAppMessage(res=this){
        return{
          title:'',
          path:res.webViewUrl,
          imageUrl:'',
        }
    }
    share(id) {
        let data = {video_recommends_id:id}
        app.post('video_recommends/share',data,(res)=>{})
    }
    
    //全屏 未实现
    fullandexit(event){
        // 真机okpages/aiyanPolularVideo/aiyanPolularVideo
        console.log("1")
        console.log(event.detail.fullScreen)
        console.log(event.target.fullScreen)
        console.log(event.detail.direction)
    //    let  height: 400px;
    //    let  width: 600px;
    }
    // 点赞
    dianzan(pid){
        console.log(pid)
        let me = this
        let data = {video_recommends_id:pid}
        app.post('video_recommends/videoLike',data,(res)=>{
            if(res.data.result.likeNum){
                me.setState({
                    zan:res.data.result.likeNum
                })
            }
            if(res.data.result.is_like == '已点赞'){
                me.setState({
                    isZan:true
                })
            }else{
                 me.setState({
                    isZan:false
                })
            }
        })
    }
   

    // 获取数据
    getDate() {
        let me = this
        let data = {video_recommends_id: this.$router.params.kepuid}
        // 获取视频信息 
        app.post('video_recommends/videoDetail', data, function (res) {
            me.setState({
                videoInfo: res.data.result,
                zan:res.data.result.likeNum
            },()=>{
                console.log(me.state.videoInfo)
                me.getDocotrMsg()
                me.getKepu()
                me.getLikeNum()
            })
        })
    }

    getLikeNum () {
        let me = this
        let data = {video_recommends_id:this.state.videoInfo.id}
        app.get('video_recommends/likeStatus',data,(res)=>{
           me.setState({
                zan:res.data.result.likeNum
           })
           if(res.data.result == '已点赞'){
               me.setState({
                   isZan:true
               })
           }else{
                me.setState({
                   isZan:false
               })
           }
        })
    }

    getDocotrMsg () {
         // 获取相关医生信息
        let me = this
        app.post('web/members/getDoctorList', {id: this.$router.params.kepuid}, function (res) {
            me.setState({
                docInfo: res.data.result.list
            })
        })
    }

    getKepu () {
        let me = this
        // 获取科普信息
        let data3 = {offset:0,length:3,doctor_id:this.state.videoInfo.doctor_id,id:this.state.videoInfo.id}
        app.post('video_recommends/referrerVideo', data3, function (res) {
            me.setState({
                kepuArr: res.data.result.list
            })
        })
    }

    // getGoodNum () {
    //     let me = this
    //     // 获取点赞数
    //     let data4 = {video_recommends_id:this.state.videoInfo.id}
    //     app.post('video_recommends/videoLike',data4,(res)=>{
    //         me.setState({
    //             zan:res.data.result.likeNum
    //         })
    //     })
    // }

    componentDidMount() {
        this.getDate()
    }

    goto(id) {
        app.redirectTo('/pages/aiyanPolularVideo/aiyanPolularVideo?kepuid='+id);
    }

    render() {
        // 相关医生数据
        let infoList = this.state.docInfo.map((item,index) => {
            return <View className='docInfo' onClick={this.gotodoctorindex.bind(this,index)}>
                <View>
                    <Image
                        className='avider'
                        src={item.head_image}
                    />
                </View>
                <View className='infoText'>
                    <View className='textTile'>
                        <View className='top'>
                            <Text className='name'>{item.name}</Text>
                            <Text className='t'>{item.positional_title}</Text>
                        </View>
                        <View className='rg'>
                            <Image className='starStyle' src={star} />
                            <Text className='tn'>{item.general_score}</Text>
                        </View>
                    </View>
                    <View ><Text>{item.hospital}</Text></View>
                    <View className='goodAt'>
                        <Text>擅长：{item.speciality}</Text>
                    </View>
                    <View className='infoTag'>
                    {/*相关医生标签数据 */}                     
                    {item.labels.map((item2) => {
                        return <View>
                                    <AtTag className='tag' circle>
                                        {item2}
                                    </AtTag>
                                </View>
                    }) }
                    </View>
                </View>
            </View>
        })
        // 相关科普数据
        let viewList = this.state.kepuArr.map((item) => {
            return <View className='topInfo2' onClick={this.goto.bind(this, item.id)}>
                {/* 科普内容 */}
                <View className='infoImage2'>
                    <Image
                        className='imageStyle2'
                        src={item.image} />
                </View>
                <View className='infoText2'>
                    <View className='textSymptom2'>
                        {item.title}
                    </View>
                    {/* 科普医生内容 */}
                    <View className="textDocInfo2">
                        <View>
                            <Image
                                className='touxiang2'
                                src={item.head_image} />
                        </View>
                        <View className='docInfo2'>
                            <View>{item.doctor_name} <Text>{item.positional_title}</Text></View>
                            <View>{item.hospital}</View>
                        </View>
                    </View>
                </View>
            </View>
        })
        // 视频数据
        let videoInfo = this.state.videoInfo

        //是否点赞了
        let ifZan = null
        if(this.state.isZan){
            ifZan = <View className='topBtn' onClick={this.dianzan.bind(this,videoInfo.id)}>
                            <Image className='btnImage' src={bighand} /> 
                            <Text className='btnText' style='font-size:12px;'>  有用  <Text> ({this.state.zan})</Text> </Text>
                    </View>
        }else{
            ifZan = <View className='topBtnno' onClick={this.dianzan.bind(this,videoInfo.id)}>
                            <Image className='btnImage' src={cancelZan} /> 
                            <Text className='btnText' style='font-size:12px;'>  有用  <Text> ({this.state.zan})</Text> </Text>
                    </View>
        }
        return (
            <View>
              <View className='aiyanVideo'>
                <View className='topInfo'>
                    {/* 顶部标题信息 */}
                    <View className='infoText'>
                        <View className='textSymptom'>
                            {videoInfo.title}
                        </View>
                        <View className="textDocInfo">
                            <View className='docInfoLeft'>
                                <View>
                                    <Image
                                        className='touxiang'
                                        src={videoInfo.head_image}
                                    />
                                </View>
                                <View className='docInfo3'>
                                    <View>{videoInfo.doctor_name}  {videoInfo.positional_title}</View>
                                    <View>{videoInfo.hospital}</View>
                                </View>
                            </View>
                            <View className='docInfoRight'>
                                <View>
                                    {videoInfo.created_at}
                                </View>
                                <View className='readMany'>
                                    阅读：  {videoInfo.pageview}次
                                </View>
                            </View>
                        </View>
                    </View>
                    {/* 视频信息 */}

                    <View className='topVideo'> 
                        <Video
                             className='infovideo'
                            // style={this.state.videoStyle}
                            src={this.state.videoInfo.path}
                            controls={true}
                            autoplay={false}
                            poster={this.state.videoInfo.image}
                            initialTime='0'
                            direction='90'
                            id='video'
                            object-fit='fill'
                            loop={false}
                            muted={false}
                            onFullscreenChange={this.fullandexit.bind(this)}
                        />
                        
                    </View>
                    <View className='topText'>
                        <Text>
                            {videoInfo.content}
                        </Text>
                    </View>
                    <View>
                        {ifZan}
                    </View>
                </View>
                <View className='centerInfo'>
                    {/* 相关医生 */}
                    <View className='centerTitle'>
                        <View>可咨询相关医生</View>
                        <View onClick={this.gotofindDoctor.bind(this)}>更多<Image className='rightIamge' src={right} /></View>
                    </View>
                    <View>
                        {infoList}
                    </View>
                </View>
                {/* 相关科普 */}
                <View className='bottonInfo'>
                    <View className='bottonTitle'>
                        <View>相关科普</View>
                        <View onClick={this.gotoaiyanPolular}>更多<Image className='rightIamge' src={right} /></View>
                    </View>
                    {viewList}
                </View>
                 {/* 底部按钮 */}
                 <View className='bottomBtn2'>
                    <View className='leftBtn' onClick={this.gotohomePage}>
                        <Text className='texts'>回首页</Text>
                    </View>
                    <View className='rightBtn'>
                        <Button className='rightBtnbtn' open-type="share" onClick={this.onShareAppMessage.bind(this)} onClick={this.share.bind(this, videoInfo.id)}><Text className='texts'>分享</Text></Button>
                    </View>
                 </View>
               </View>
            </View>
        )
    }
}